@import "../var";
@import "../mixin";
@import "../module/orderbooking/bookingTop";// 订单信息
@import "../module/orderbooking/orderPriceDetail";// 价格详情弹出
@import "../module/orderbooking/contactSel";// 联系人选择
@import "../module/orderbooking/insuranceSel";// 保险选择
@import "../module/orderbooking/invoiceSel";// 发票选择
@import "../module/orderbooking/serviceSelect";// 可选服务
// 数量选择
.ticket-num-item,
.booking-numlist {
  background: $clr-white;
  padding: px(10) 0;
  .gzl-flex {
    padding: px(10) px(16);
  }
  .numlist-price {
    margin-left: px(16);
  }
}
// 游客选择
.tourist-select {
  margin-top: px(12);
  padding: px(4) 0 px(18);
  background: $clr-white;
  margin-bottom: px(12);
}
.tourist-sel-list {
  padding: 0 px(16);
  li {
    line-height: px(36);
    text-align: center;
    border: 1px dashed $clr-gc;
    border-radius: px(18);
    &:not(:first-child) {
      margin-top: px(12);
    }
    .icon {
      color: $clr-g6;
      margin-right: px(4);
    }
  }
}
.tourist-info-list {
  padding: 0 px(16);
  .booking-list-item {
    margin-top: px(10);
    .icon {
      margin-right: px(6);
    }
    .tourist-tel,
    .tourist-id {
      color: $clr-g9;
      margin-left: px(8);
    }
  }
}
/* 酒店 *************************************************************/
.booking-section {
  padding-bottom: px(12);
}
// 填写联系人
.booking-contact {
  margin-bottom: px(12);
}
// 预定数
.hotel-booking-num {
  padding: px(16);
  background: $clr-white;
  .gzl-flex__item {
    em {
      font-size: px(12);
      color: $clr-g9;
      margin: 0 px(3);
    }
    .icon {
      color: $clr-active;
    }
  }
}
.booking-room-tip {
  p:not(:first-child) {
    margin-top: px(20);
  }
}
.booking-num-group {
  .booking-list-bd {
    li {
      position: relative;
      &:not(:first-child) {
        display: none;
        &:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          left: px(16);
          border-top: 1px solid $clr-ge;
          transform: scaleY(.5);
        }
      }
    }
  }
}
.booking-list {
  padding: 0 px(14) px(16) px(12);
  background: $clr-white;
}
.booking-list-item {
  position: relative;
  padding-top: px(34);
  box-shadow: 0 px(3) px(8) 0 rgba(0,0,0,0.06);
  border-radius: px(4);
  &:not(:first-child) {
    margin-top: px(10);
  }
  .booking-list-tip {
    position: absolute;
    top: px(12);
    left: px(-4);
    padding: 0 px(13) 0 px(6);
    color: $clr-white;
    font-size: px(10);
    line-height: px(18);
    background-image: $clr-gradient-primary;
    border-radius: 0 px(18) px(18) 0;
    &.adult, &.visitor {
      background-image: linear-gradient(-157deg, #3AC2FF 0%, #0DB2FD 100%);
      &:before {
        border-top: px(4) solid #00A0E9;
      }
    }
    &.child {
      background-image: linear-gradient(-157deg, #4CD964 0%, #21CB70 100%);
      &:before {
        border-top: px(4) solid #008F3F;
      }
    }
    &.elder {
      background-image: linear-gradient(-157deg, #FFD302 0%, #FFAE00 100%);
    }
    &:before {
      content: '';
      position: absolute;
      bottom: px(-4);
      left: 0;
      width: 0;
      height: 0;
      border-left: px(4) solid transparent;
      border-top: px(4) solid #FF8C00;
    }
  }
  .booking-list-hd {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: px(12);
    text-align: center;
    height: px(34);
    .list-visitor {
      display: inline-block;
      vertical-align: top;
      line-height: px(22);
      font-size: px(12);
      border-radius: px(22);
      padding: 0 px(24) 0 px(16);
      background: #F7F7F7;
      position: relative;
      &:after {
        position: absolute;
        right: px(14);
        top: 0;
        bottom: 0;
        margin: auto;
        @include arrow;
      }
    }
    .list-count {
      position: absolute;
      top: px(14);
      right: px(16);
      line-height: 1;
      &:after {
        content: '';
        width: 200%;
        height: 200%;
        position: absolute;
        top: -50%;
        left: -50%;
      }
    }
  }
  .booking-list-bd {
    .icon {
      color: #737373;
    }
    .gzl-cell__bd {
      &:not(:first-child) {
        position: relative;
        padding-left: px(12);
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          height: px(20);
          border-left: 1px solid $clr-ge;
          transform: scaleX(.5);
        }
      }
    }
    .tourist-name{
      display: inline-block;
      max-width: px(90);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.list-visitor-select {
  padding: px(9) px(16);
  .select-tip {
    font-size: px(12);
    color: $clr-g9;
  }
  .gzl-flex {
    padding: px(12) 0;
  }
}

/* 票券 *************************************************************/
// 票券信息
.ticket-booking-info {
  margin-bottom: px(12);
  .ticket-collection {
    &~div {
      display: none;
    }
  }
  .collection-type {
    max-width: px(256);
    @include ellipsis;
  }
}
// 票券数量选择
.ticket-booking-numlist {
  margin-top: px(12);
  .gzl-cell:first-child {
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      left: px(16);
      border-top: 1px solid $clr-ge;
      transform: scaleY(.5);
    }
  }
}
// 门店信息
.store-info {
  h2 {
    font-size: px(16);
  }
  li {
    margin-top: px(4);
    font-size: px(12);
    overflow: hidden;
    label {
      float: left;
    }
    p {
      overflow: hidden;
    }
  }
}

/* 旅游保险 *************************************************************/
.travel-insurance{
  margin-bottom: px(12);
  .insurance-detail {
    background-color: #fff;
    padding: px(8) px(16) px(16);
    font-size: px(12);
    .gzl-flex {
      &:not(:first-child) {
        margin-top: px(8);
      }
    }
    .insurance-num {
      color: $clr-g9;
    }
  }
}
/* 可选服务组*************************************************************/
.chooseable-series{
  margin-bottom: px(12);
}
/* 优惠系列(积分,优惠券,促销) *************************************************************/
.reducer-series{
  margin-bottom: px(12);
  //优惠券
  .discounts{
    .gzl-cell__ft{
      color: #F55;
    }
  }
}
/* 发票备注系列(发票信息,订单备注,推荐码) *************************************************************/

.remark-info{
  margin-bottom: px(12);
}

/* agreements *************************************************************/
.agreements{
  margin-bottom: px(12);
}

.orderAgreement{
  padding: 0 .16rem;
  align-items: center;
  .contact-check{
    color: #999;
    font-size: 0.2rem;
    margin-right: 0.12rem;
  }
  .gzl-flex__item{
    color: #666;
    font-size: 0.12rem;
    span{
      color:#ffab00;
      text-decoration: underline;
    }
  }
}

// 可选服务明细
.open-chooseable-series {
  &:after {
    opacity: 1;
  }
}
.service-selected-list {
  font-size: 0;
  padding-top: px(8);
  background-color: $clr-white;
  .gzl-cell {
    padding: px(4) px(16);
    .gzl-cell__bd {
      font-size: px(12);
      &.ri {
        text-align: right;
      }
    }
    p {
      max-width: px(243);
      display: inline-block;
      vertical-align: top;
      font-size: px(12);
      color: $clr-g3;
      margin-right: 8px;
      @include ellipsis();
      &.inner {
        max-width: px(132);
      }
    }
    em {
      display: inline-block;
      vertical-align: top;
      font-size: px(12);
      color: $clr-active;
    }
    .s-count {
      color: $clr-g6;
    }
    .s-price {
      color: $clr-warn;
    }
  }
  &>:last-child {
    padding-bottom: px(16);
  }
}

.gzl-popup__bd {
  &>:first-child {
    margin: px(10) 0;
  }
  .per-room-list {
    .per-room-item {
      margin-bottom: px(18);
      .gzl-cell {
        padding: px(6) px(16);
      }
    }
    &>:last-child {
      margin-bottom: px(28);
    }
  }
}

.room-outer-list {
  .gzl-cell {
    padding: px(10) px(16);
  }
}

.serviceGroup-outer-list {
  .serviceGroup-outer-item {
    &.gzl-cell {
      padding: px(6) px(16);
      .gzl-cell__bd {
        &.mi {
          p {
            width: px(230);
            color: $clr-g9;
            @include ellipsis();
          }
        }
      }
    }
  }
}

.room-count {
  .gzl-cell__bd {
    font-weight: bold;
  }
  &.change-text {
    .gzl-cell__bd {
      font-weight: 400;
    }
  }
}

.room-outer-item {
  &.change {
    padding: px(6) px(16) !important;
  }
}


/* 邮轮(仓房)订单填写页 ************************************************************/
.cruiseChoose-section{
  background-color: #fafafa;
  .gzl-cells{
    .gzl-cell{
      height: px(54);
      
      .gzl-cell__hd{
        font-size: px(16);
        font-weight: 600;
      }
      .gzl-cell__bd{
        padding-left: px(4);
        span{
          display: none;
          // display: inline-block;
          width: px(18);
          height: px(18);
          background-color: #FFD800;
          color: #333;
          text-align: center;
          border-radius: 50%;
          line-height: px(18);
          vertical-align: top;
        }
      }
      .gzl-cell__ft{
        font-size: px(12);
        color: #f55;
        span{
          font-size: px(20);
          margin-right: px(2);
        }
        em{
          color: #999;
        }
      }
    }
    &>.gzl-cell{
      &::after{
        border-bottom: 0;
      }
    }
    .cabinList{
      .cabinItem{
        padding: px(16);
        align-items: center;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          left: .16rem;
          border-top: 1px solid #eee;
          -webkit-transform: scaleY(.5);
          -moz-transform: scaleY(.5);
          -ms-transform: scaleY(.5);
          -o-transform: scaleY(.5);
          transform: scaleY(.5);
        }
        &:last-child{
          &::after{
            content: none;
          }
        }
        .gzl-flex__item{
          .cabinName{
            margin-bottom: px(4);
          }
          .cabinDesc{
            font-size: px(12);
            color: #999;
            span{
              margin-right: px(16);
              position: relative;
              display: inline-block;
              vertical-align: top;
              &::after{
                content: '';
                position: absolute;
                bottom: 0;
                right: -0.08rem;
                height: 100%;
                border-left: 1px solid #D8D8D8;
                transform: scaleY(.59);
              }
              &.limitText{
                max-width: px(96);
                margin-right: px(7);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .cabinDescDetail{
              color: #ffab00;
              position: relative;
              &::after{
                content: " ";
                display: inline-block;
                height: .06rem;
                width: .06rem;
                border-width: .01rem .01rem 0rem 0rem;
                border-color: #ffab00;
                border-style: solid;
                -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
                -moz-transform: matrix(.71,.71,-.71,.71,0,0);
                -ms-transform: matrix(.71,.71,-.71,.71,0,0);
                -o-transform: matrix(.71,.71,-.71,.71,0,0);
                transform: matrix(.71,.71,-.71,.71,0,0);
                position: absolute;
                top: 50%;
                right: -0.10rem;
                margin-top: -.03rem;
              }
            }
          }
        }
        .cabinNum{
          display: none;
        }
        .cabin-button{
          width: px(50);
          height: px(24);
          line-height: px(24);
          font-size: px(12);
          margin-left: px(8);
          &.revise{
            border: 1px solid #FFAB00;
            border-radius: 12px;
            background-color: none;
            background-image: none;
            color: #FFAB00;
          }
        }
        &.saleOut{
          .gzl-flex__item{
            .cabinName{
              color: #999;
            }
          }
          .cabin-button{
            background: #EEEEEE;
            color: #999;
          }
        }
      }
    }
  }
}
.cruiseChoose-footer{
  .gzl-footbar__price{
    span{
      font-weight: 600;
    }
  }
}